//关闭头部
$(function () {
    $(".close").click(function () {
        $(".header .top").hide();
        $(".header").css("height", "36px");
    })
})

//点击退出 到空页面
$(function () {
    $(".exit").click(function () {
        //1,空购物车显示
        $(".empty-cart").css({
            "visibility": "visible",
        });
        //2.其他盒子隐藏
        $(".otherBox").hide();
        $(".concat").css("marginTop", "257px");
        //3.头部你好变回原来内容
        $(".loginBef").show();
        $(".loginAfter").hide();

    })
})

// //点击删除
// $(function () {
//     $(".link-box").find(".delete").click(function () {
//         //空购物车显示
//         $(".empty-cart").css({
//             "visibility": "visible",
//         });
//         //
//         $(".goods-browser").css("marginTop", "316px")
//         $(".cart-goods-title").hide();
//         $(".cart-goods-box").hide();
//         $(".cart-btn").hide();
//     })
// })


//全选框 
$(function () {
    //1.给每个checkbox绑定点击变色
    let num = 0;
    $(".checkBox").each((index, el) => {
        $(el).click(function () {
            num++;
            if (num % 2 != 0) {
                $(el).css("backgroundColor", "#ff4554");
            } else {
                $(el).css("backgroundColor", "#fff");
            }
        })
    })
    //2.全选
    $(".checkBox.all").each((index, el) => {
        let m = 0;
        $(el).click(function () {
            m++;
            if (m % 2 != 0) {
                $(".checkBox").css("backgroundColor", "#ff4554");
                //点击删除
                $(".action-btn").find(".dele").click(function () {
                    //空购物车显示
                    $(".empty-cart").css({
                        "visibility": "visible",
                    });
                    $(".goods-browser").css("marginTop", "316px")
                    $(".cart-goods-title").hide();
                    $(".cart-goods-box").hide();
                    $(".cart-btn").hide();
                    //全选删除之后再次发送ajax
                    $.ajax({
                        url: "./delete",
                        type: "post",
                        data: { cId: $(".goods-num-item").find(".input-num").parent().attr("data") }
                    }).done(function (res) {
                        layer.msg(res.message)
                        location = location;
                    })
                })
            }
            if (m % 2 == 0) {
                $(".checkBox").css("backgroundColor", "#fff");
            }
        })
    })

})


//将购物商品渲染到页面中
$(function () {

    // http://localhost:8080/cartList?uId=1
    let id = JSON.parse(localStorage.getItem("userInfo")).uId;
    // console.log(id);
    $.ajax({
        url: "./cartList",
        type: "get",
        data: { uId: id }
    }).done(function (res) {
        console.log(res);

        let strHtml = ``;
        let { data } = res;
        console.log(data);
        data.forEach(el => {
            strHtml += `
            <div class="items">
                <div class="items-content">
                    <!-- 第一个框打勾框 -->
                    <div class="check-input-box fl">
                        <span class="checkBox">
                            <span class="iconfont icon-querenduigougouhao pos-a"></span>
                        </span>
                    </div>
                    <!-- 第二个图片框 -->
                    <div class="img-box fl">
                        <a href="./2.details.html?pid=${el.pId}">
                            <img src="${el.pImg}" alt=""></a>
                    </div>
                    <!-- 第三个商品名称 -->
                    <div class="goods-name fl">
                        <a href="./2.details.html?pid=${el.pId}">Metersbonwe｜${el.pName}</a>
                    </div>
                    <!-- 第四个商品颜色属性 -->
                    <div class="goods-attr fl">
                        <p>
                            ${el.pColor}
                        </p>
                        <p>
                            ${el.pSize}
                        </p>
                    </div>
                    <!-- 第五个商品价格 -->
                    <div class="goods-price fl">
                        <div>
                            ￥<span class="sales-price">${el.pPrice}</span>
                        </div>
                    </div>
                    <!-- 第六个加加减减按钮 -->
                    <div class="goods-num-box fl">
                        <div class="goods-num-item" data=${el.cId}>
                            <input type="text" class="calc sub" type="button" value="-">
                            <input type="text" class="input-num" value="${el.pNumber}">
                            <input type="text" class="calc add" type="button" value="+">
                        </div>
                    </div>
                    <!-- 第七个小计 -->
                    <div class="goods-sum fl">
                        ￥<span>${el.pPrice * el.pNumber}</span>
                    </div>
                    <!-- 第八个操作 -->
                    <div class="link-box">
                        <p>
                            <a href="javascript:void(0)">移入收藏夹</a>
                        </p>
                        <p>
                            <a href="javascript:void(0)" class="delete">删除</a>
                        </p>
                    </div>
                </div>
            </div>
            `
        })
        $(".cart-content").html(strHtml);
        // console.log($(".goods-num-item").find(".sub"));
        // console.log($(".goods-num-item").find(".add"));

        //改变购物车数量
        $(".cart-goods-title").html();//全部商品
        let all = 0;
        $(".goods-num-item").find(".add").each((index, el) => {
            // console.log(Number($(el).prev().val()));
            all += Number($(el).prev().val());
            $(".cart-goods-title").html("全部商品" + all);
            // console.log(all);
            $(el).on("click", function () {
                $(this).prev().prev().css("color", "#333")
                let pnum = $(this).prev().val();
                $(this).prev().val(++pnum);
                let currentNum = $(this).prev().val();//数量
                // console.log(currentNum);
                let price = data[index].pPrice;//单价
                // console.log(price);
                $(this).parent().parent().next().find("span").text(currentNum * price);
                let xiaoji = $(this).parent().parent().next().find("span").text();
                // console.log(xiaoji);//小计
                all += 1;
                // console.log(all);
                $(".cart-goods-title").html("全部商品" + all);

                add();
            })
        })
        $(".goods-num-item").find(".sub").each((index, el) => {
            $(el).on("click", function () {
                // console.log(111);
                let pnum = $(this).next().val();
                if (pnum <= 1) {
                    $(el).css("color", "#ccc")
                    return;
                }
                $(this).next().val(--pnum);
                $(el).css("color", "#333");
                let currentNum = $(this).next().val();//数量
                // console.log(currentNum);
                let price = data[index].pPrice;//单价
                // console.log(price);
                $(this).parent().parent().next().find("span").text(currentNum * price);
                let xiaoji = $(this).parent().parent().next().find("span").text();
                // console.log(xiaoji);//小计
                all -= 1;
                // console.log(all);
                $(".cart-goods-title").html("全部商品" + all);
                add();
            })

        })
        $(".header").attr("data", $(".cart-goods-title").html())
        //每个图片的选择框
        $(".check-input-box").find(".checkBox").each((index, el) => {
            //每个框单击变色，双击取消选择
            let num = 0;
            $(el).on("click", function () {
                ++num;
                if (num % 2 != 0) {
                    $(this).css("backgroundColor", "#ff4554");
                }
                if (num % 2 == 0) {
                    $(this).css("backgroundColor", "#fff");
                }
                add();
                //当上面4个白框都变为红色时下面七个白框也变为红色
                let flag = true;//不变为红色
                for (var i = 0; i < $(".check-input-box").find(".checkBox").length; i++) {
                    if ($(".check-input-box").find(".checkBox").eq(i).css("backgroundColor") != "rgb(255, 69, 84)") {
                        console.log($(".check-input-box").find(".checkBox").eq(i).css("backgroundColor"));
                        flag = false;
                        console.log(flag);
                        return flag;
                    }
                }
                console.log(flag);
                if (flag) {
                    $(".otherBox").find(".checkBox").css("backgroundColor", "#ff4554");
                }
            })
        })

    })
})


//改变数量
function add() {
    let value = 0;
    let zongez = 0;
    console.log();
    $(".goods-num-item").find(".input-num").each((index1, el1) => {
        let kuang = $(el1).parent().parent().parent().children().eq(0).find(".checkBox");
        // console.log(kuang);
        let zonge = Number($(el1).parent().parent().parent().children().eq(6).find("span").text());
        // console.log(zonge);
        zongez += zonge;
        if (kuang.css("backgroundColor") == "rgb(255, 69, 84)") {
            $(".total-price").find("span").text(zongez);
            $(".zongji").find("span").text(zongez);
            value += Number($(el1).val());
            let zongji = $(".total-num-box").find(".number").text(value);
            $(".link-box").find(".delete").click(function () {
                console.log(231);
                $(this).parent().parent().parent().css("display", "none");
                $.ajax({
                    url: "./delete",
                    type: "post",
                    data: { cId: $(".goods-num-item").find(".input-num").parent().attr("data") }
                }).done(function (res) {
                    layer.msg(res.message)
                    location = location;
                })
            })
            $(".action-btn").find(".dele").click(function () {
                console.log(231);
                $(this).parent().parent().parent().css("display", "none");
                $.ajax({
                    url: "./delete",
                    type: "post",
                    data: { cId: $(".goods-num-item").find(".input-num").parent().attr("data") }
                }).done(function (res) {
                    layer.msg(res.message)
                })
            })
        }

    })
    $.ajax({
        url: "./modify",
        type: "post",
        data: {
            pnum: $(".goods-num-item").find(".input-num").val(),
            cId: $(".goods-num-item").find(".input-num").parent().attr("data")
        },
    }).done(function (res) {
        console.log(res.message);
        // layer.msg(res.message)
    })
}


//登录之后头部发生变化
//让头部显示M+电话
$(function () {
    // console.log(JSON.parse(localStorage.getItem("userInfo")).uPhone);
    if (!(JSON.parse(localStorage.getItem("userInfo")))) {
        return
    }
    let data = JSON.parse(localStorage.getItem("userInfo") || "{}");
    $(".loginAfter").find(".username").text("M" + data.uPhone);
    $(".loginBef").hide();//你好 注册 隐藏
    $(".loginAfter").show();//你好 M15234197057 显示
    $(".exit").click(function () {
        localStorage.clear("userInfo");
        //3.头部你好变回原来内容
        $(".loginBef").show();
        $(".loginAfter").hide();
        //1,空购物车显示
        $(".empty-cart").css({
            "visibility": "visible",
        });
        //2.其他盒子隐藏
        $(".otherBox").hide();
        $(".concat").css("marginTop", "257px");
        //3.头部你好变回原来内容
        $(".loginBef").show();
        $(".loginAfter").hide();
    })
    console.log((JSON.parse(localStorage.getItem("userInfo"))));

})
